<template>
  <div class="group border-topbottom">
    <div class="group-title">
      <div class="left">
        <span>{{ groupInfo.text }}</span>
        <span class="desc">{{  groupInfo.descTag}}</span>
      </div>
      <div class="right"
        @click="toggle">
        <span class="price">￥<span class="price-num">{{ groupInfo.priceInfo }}</span></span>起
        <span class="iconfont">&#xe62e;</span>
      </div>
    </div>
    <ul class="list-children" v-show="open">
      <li v-for="item in groupInfo.children"
        :key="item.id">
        <detail-list-item :ticketInfo="item"/>
      </li>
    </ul>
  </div>
</template>

<script>
import DetailListItem from './DetailListItem'
export default {
  name: 'DetailListGroup',
  components: {
    DetailListItem
  },
  props: {
    groupInfo: Object
  },
  data () {
    return {
      open: false
    }
  },
  methods: {
    toggle () {
      this.open = !this.open
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/variables.styl'
  .group
    .group-title
      position relative
      height $headerHeight
      line-height $headerHeight
      padding-left .2rem
      background #fff
      font-size .3rem
      .left
        .desc
          color $grayTextColor
          font-size .24rem
      .right
          position absolute
          top 0
          bottom 0
          right .22rem
          font-size .24rem
          color $grayTextColor
          .price
            color $highlightTextColor
            .price-num
              font-size .4rem
          .iconfont
            font-size .24rem
</style>
